<template>
  <view class="my-page">
    <!-- 标题 -->
    <nav-custom :showSearch="false"></nav-custom>
    <view>
      <!-- 地址 -->
      <view class="modelRight flex direct-column default padding-10 margin-bottom-6"
        v-for="(item, index) in addressList" :key="index">
        <view class="defaultText" v-if="item.isdefault">默</view>
        <view class="flex justify-between">
          <view class="flex margin-bottom-10">
            <!-- <text class="iconfont icon-gouxuan check" :class="checkedIdx == index ? 'color-yellow' : ''"
              @click="handleCheckAddress(index)"></text> -->
            <view class="text-left">
              <view class="color-2c f16 margin-bottom-5">{{ item.username }} {{ item.phone }}</view>
              <text class="text-left">{{ item.city }}{{ item.region }}{{ item.detail }}</text>
            </view>
          </view>
          <text class="iconfont icon-bianji edit" @click="handledetail" :data-idx="item.objectId"></text>
        </view>
        <view class="addBot flex justify-between">
          <view v-if="item.isdefault" style="color: black;"><text>默认地址</text></view>
          <view v-else class="addBotRig" @click="handleDefault(index)">
            <text class="iconfont icon-bianji"></text>
            <text class="margin-left-10">设为默认</text>
          </view>
          <view class="del-text" @click="handleDelete(index)">
            <text class="iconfont icon-lajixiang"></text>
            <text class="margin-left-10">删除</text>
          </view>
        </view>
      </view>
      <!-- 添加地址 -->
      <view class="addAdd" @click="handledetail">
        <text class="iconfont icon-chahao"></text>
        新增地址
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {}
    },
    onShow() {
      this.$store.dispatch('address/addressGetAct',this.userid)
    },
    computed: {
      ...mapState({
        addressList: state => state.address.addressList,
        checkedIdx: state => state.address.checkedIdx,
        userid: state => state.user.userInfo.objectId,
      })
    },
    methods: {
      ...mapMutations({
        // 'handleDefault':'address/addressDefaultMut',
        // handleCheckAddress: 'address/addressCheckMut'
      }),
      backDetail() {
        uni.navigateBack({
          delta: 1
        })
      },
      handledetail(e) {
        //***两处使用，使用自定义属性
        // console.log(e,"e===============");
        let { idx } = e.target.dataset
        uni.navigateTo({
          url: `/pagesA/address/address-detail?idx=${idx}`  
        })
      },
      handleDefault(id) { // 添加默认
        let obj = {
          requests: []
        }
        this.addressList.forEach((item, i) => {
          let bool = i === id
          obj.requests.push({
            method: 'PUT',
            path: `/1.1/classes/address/${item.objectId}`,
            body: {
              isdefault: bool
            }
          })
        })
        this.$H.post('/1.1/batch', obj).then(res => {
          //批量操作在线数据
          this.$store.commit('address/addressDefaultMut', id)
        })
        //***只考虑了更新单条数据
        // const isdefault = val.isdefault
        // this.$store.commit('address/addressDefaultMut', id)
        // this.$store.dispatch('address/updateAddressAct', {id,val:{isdefault}})
      },
      handleDelete(idx) { // 删除地址
        let url = ''
        this.addressList.forEach((item, i) => {
          if (i === idx) {
            url = `/1.1/classes/address/${item.objectId}`
          }
        })
        this.$H.delete(url).then(res => {
          this.$store.commit('address/deleteAddress', idx)
        })
      }
    }
  }
</script>


<style lang="scss">

  // 收货地址
  .modelRight {
    border: 1px solid #e9e9e9;
    border-radius: 16rpx;
    overflow: hidden;
    margin: 0rpx 20rpx;

    &:nth-child(1) {
      margin-top: 20rpx;
    }

    view {
      background-color: white;
    }

    .check {
      margin-right: 20rpx;
    }

    .edit {
      width: 60rpx;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
      border-radius: 50%;
      background-color: #e6e6e6;
    }

    .addBot {
      view {
        flex: 1;
      }
      .del-text{
        border-left:1px solid #e6e6e6;
      }
    }
  }

  .default {
    position: relative;
    overflow: hidden;

    .defaultText {
      position: absolute;
      background-color: #ffe32a;
      width: 100rpx;
      font-size: 20rpx;
      text-align: center;
      padding: 10rpx 0;
      transform: rotate(45deg);
      top: -8rpx;
      right: -34rpx;
    }
  }

  // 添加地址
  .addAdd {
    margin: 50rpx 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text {
      display: inline-block;
      transform: rotate(45deg);
      background-color: #ffe32a;
      font-size: 50rpx;
      padding: 20rpx;
      color: white;
      font-weight: bold;
      border-radius: 50%;
      margin-bottom: 10rpx;
    }
  }
</style>
